<template>
  <div class="mainc" v-show="state.meshow">
    <div class="titc">
      <div class="left">实时预览</div>
      <div class="right">
        <el-button
          type="primary"
          style="width: 100px; background: #2263bf"
          @click="back"
          >返回</el-button
        >
      </div>
    </div>
    <div class="infoc">
      <div id="play_window_onem" class="video">介里是视频</div>
      <div class="info">
        <div class="tab-box">
          <div
            class="tab-item"
            @click="selectTab('device')"
            :class="{ active: currentTab == 'device' }"
          >
            设备详情
          </div>
          <div
            class="tab-item"
            @click="selectTab('event')"
            :class="{ active: currentTab == 'event' }"
          >
            事件详情
          </div>
        </div>

        <!-- <div class="tit">设备详情</div>
        <div class="line"></div> -->
        <template v-if="currentTab == 'device'">
          <div class="one">
            <div class="p1">设备ID:</div>
            <div class="p2">{{ state.info?.deviceId }}</div>
          </div>
          <div class="one">
            <div class="p1">设备名称:</div>
            <div class="p2">{{ state.info?.deviceName }}</div>
          </div>
          <div class="one">
            <div class="p1">设备类型:</div>
            <div class="p2">{{ state.info?.cameraType }}</div>
          </div>
          <div class="one">
            <div class="p1">设备品牌:</div>
            <div class="p2">{{ state.info?.manufacturerName }}</div>
          </div>
          <div class="one">
            <div class="p1">所属单位:</div>
            <div class="p2">{{ state.info?.residenceOrgName }}</div>
          </div>
          <div class="one">
            <div class="p1">标签:</div>
            <div class="p2">{{ state.info?.tagLables }}</div>
          </div>
          <div class="one">
            <div class="p1">经度:</div>
            <div class="p2">{{ state.info?.longitude }}</div>
          </div>
          <div class="one">
            <div class="p1">纬度:</div>
            <div class="p2">{{ state.info?.latitude }}</div>
          </div>
          <div class="one">
            <div class="p1">IP地址:</div>
            <div class="p2">{{ state.info?.cameraIpv4 }}</div>
          </div>

          <div class="btns">
            <ptz :did="'' + state.info?.deviceId" />
          </div>
        </template>
        <div class="eventlist" v-else>
          <div class="listitem" v-for="(item, idnex) in eventList" :key="idnex">
            <img
              class="eventImg"
              :src="item.pic"
            />
            <div class="infoText">
              <div class="title">{{ item.eventName }}</div>
              <p class="time">{{ item.eventTime }}</p>
              <p class="detail exlipse">{{ item.address }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { getPointUrl } from "@/api/event.js";
import { getEventListByGamer } from "@/api/mapvue.js";
import ptz from "@/components/videoplan/ptz.vue";
const props = defineProps({
  list: Array,
});
const emit = defineEmits(["back"]);
const state = reactive({
  meshow: false,
  info: {},
  myPlugin: null,
  curIndex: 0,
});

const back = (res) => {
  state.myPlugin.JS_StopRealPlayAll().then(() => {
    state.meshow = false;
  });
};
const show = () => {
  state.meshow = true;
  state.curIndex = 0;
  state.info = props.list[0];
  console.log(state.info);
  setTimeout(() => {
    //初始化播放组件
    initPlayer();
    let sp = 1;
    if (props.list.length > 1) sp = 2;
    if (props.list.length > 4) sp = 3;
    state.myPlugin.JS_ArrangeWindow(sp).then(() => {
      play();
    });
  }, 300);
};

let eventList = ref([]);
const getEventList = async (point) => {
  try {
    let { data } = await getEventListByGamer({
      pageNum: 1,
      pageSize: 20,
      deviceId: point.deviceId,
    });
    eventList.value = data.busizEventList;
  } catch (e) {
    console.error(e);
  }
};

//左侧列表选择返回
const play = async () => {
  let ids = props.list.map((item) => item.deviceId);
  //根据选择 获取监控点播放地址，尝试播放
  let { data } = await getPointUrl({ deviceIds: ids });
  let urls = data.cameraUrls || [];
  if (urls.length > 0) {
    state.myPlugin.JS_StopRealPlayAll();
    for (let i = 0; i < urls.length; i++) {
      if (i > 8) break;
      state.myPlugin
        .JS_Play(urls[i].cameraUrl, { playURL: urls[i].cameraUrl, mode: 0 }, i)
        .then(() => {});
    }
  } else {
    ElMessage.error("未获取到播放地址");
  }
  // useApi.post("/api/common/getcameraurl", { cameraIds: ids }).then((res) => {
  //   let urls = res.data.cameraUrls || [];
  //   if (urls.length > 0) {
  //     state.myPlugin.JS_StopRealPlayAll();
  //     for (let i = 0; i < urls.length; i++) {
  //       if (i > 8) break;
  //       state.myPlugin
  //         .JS_Play(
  //           urls[i].cameraUrl,
  //           { playURL: urls[i].cameraUrl, mode: 0 },
  //           i
  //         )
  //         .then(() => {});
  //     }
  //   } else {
  //     ElMessage.error("未获取到播放地址");
  //   }
  // });
};
const initPlayer = () => {
  if (state.myPlugin != null) return;
  state.myPlugin = new JSPlugin({
    szId: "play_window_onem", //需要英文字母开头，唯一性，必填
    szBasePath: "/js/", // 必填,与h5player.min.js的引用目录一致
    bSupporDoubleClickFull: true, //是否支持双击全屏，默认true
    // 分屏播放，默认最大分屏4*4
    iMaxSplit: 9,
    iCurrentSplit: 1,
  });

  state.myPlugin.JS_SetWindowControlCallback({
    windowEventSelect: function (index) {
      //插件选中窗口回调
      state.curIndex = index;
      if (props.list.length > index) {
        state.info = props.list[index];
        getEventList(state.info);
      }
    },
    pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {
      //插件错误回调
      console.error(`window-${iWndIndex}, errorCode: ${iErrorCode}`, oError);
      ElMessage.error(`播放失败, 错误码: ${iErrorCode}`);
      //回复变量
      state.curIndex = 0; //设置播放窗口号=0
      state.start = null; //设置播放开始时间=null，也就是没有开始
    },
  });
};
const destoryPlayer = () => {
  if (state.myPlugin) {
    state.myPlugin.JS_StopRealPlayAll();
    state.myPlugin.JS_DestroyWorker();
    state.myPlugin = null;
  }
};

let currentTab = ref("device");

const selectTab = (type) => {
  currentTab.value = type;
  // getData();
  getEventList(state.info);
};

defineExpose({
  show,
});
//注销时 销毁组件
onBeforeUnmount(() => {
  destoryPlayer();
});
</script>

<style lang="scss" scoped>
.mainc {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}
.titc {
  display: flex;
  justify-content: space-between;
  height: 40px;
  align-items: center;
  padding: 0 20px;
  .left {
    font-size: 18px;
    font-weight: bold;
  }
}
.infoc {
  display: flex;
  height: calc(100% - 30px);
  padding: 0 20px;
  z-index: 10;
  .video {
    width: calc(100% - 350px);
    height: 100%;
    margin-right: 20px;
  }
  .info {
    flex: 1;
  }
}
.info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: #f6faff;
  box-shadow: inset 0px 0px 3px 0px rgba(71, 136, 223, 0.31);
  padding-top: 35px;
  overflow: scroll;
  .tit {
    font-weight: 600;
    font-size: 18px;
    color: #293555;
    line-height: 25px;
  }
  .one {
    display: flex;
    padding: 0 10px;
    // justify-content: space-between;
    gap: 10px;
    .p1 {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #666666;
      line-height: 29px;
    }
    .p2 {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #666666;
      line-height: 29px;
    }
  }
}
.line {
  margin-top: 0px;
  margin-bottom: 5px;
  width: 100%;
  height: 1px;
  background: #d8d8d8;
}
.btns {
  margin-top: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}
.eventlist {
  height: calc(100% - 50px);
  // border: 1px solid red;
  overflow: auto;
  padding: 0 10px;
  .listitem {
    width: 100%;
    min-height: 70px;
    display: flex;
    align-items: center;
    background: #ffffff;
    box-shadow: 0px 0px 29px 0px rgba(70, 102, 149, 0.06);
    border-radius: 6px;
    margin-bottom: 10px;
    .eventImg {
      width: 50px;
      height: 50px;
      margin-right: 12px;
    }
    .infoText {
      flex: 1;
      .title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #333333;
        line-height: 20px;
      }
      .time {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #666666;
        line-height: 17px;
      }
      .detail {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #666666;
        line-height: 17px;
      }
    }
  }
}
.tab-box {
  cursor: pointer;
  width: 224px;
  height: 32px;
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  margin: 0 auto;
  .tab-item {
    width: 50%;
    font-size: 14px;
    color: #2263bf;
    line-height: 32px;
    text-align: center;
    background: #ffffff;
    box-shadow: 0px 0px 5px 0px rgba(70, 102, 149, 0.12);
    &.active {
      color: #fff;
      background: #2263bf;
      border-radius: 6px 0px 0px 6px;
      border-radius: 3px;
      border: 1px solid rgba(34, 99, 191, 0.09);
    }
  }
}
</style>